<template>
  <div>
    <my-head></my-head>
    <el-container>
      <!--<my-head></my-head>-->
      <div style="width: 90%">
        <el-row>
          <div style="width:110%;height:300px">
            <el-card class="box-card" style="height: 350px;background-color: lightslategrey">
              <el-row>
                <el-col :span="10" style="width: 25%">
                  <el-card :body-style="{ padding: '1px' }">
                    <img style="width: 100%;height: 300px"  :src="this.movie.poster" class="image">
                  </el-card>
                </el-col>
                <el-col :span="10" style="width: 50%">
                  <el-card style="background-color: skyblue">
                    <div slot="header" class="clearfix">
                      <el-row>
                        <el-col style="width: 40%;font-size: 25px">
                          {{this.movie.movieName}}
                        </el-col>
                      </el-row>
                      <el-row style="margin-top: 10px">
                        <el-col style="width: 40%">
                        {{this.movie.movieEname}}
                        </el-col>
                      </el-row>
                      <el-row style="margin-top: 20px">
                        <el-col style="width: 40%">
                           <span style="font-size: 3px">{{this.movie.movieType}}</span>
                        </el-col>
                      </el-row>
                      <el-row style="margin-top: 20px">
                        <el-col style="width: 40%">
                          <span style="font-size: 3px">{{this.movie.duration}}</span>
                        </el-col>
                      </el-row>
                      <el-row style="margin-top: 20px">
                        <el-col style="width: 40%">
                      <span style="font-size: 3px">{{this.movie.movieRtime}}{{this.movie.movieCountry}}</span>
                        </el-col>
                      </el-row>
                      <el-col :span="20" style="width: 50%;margin-left: 300px;margin-top: -50px">
                        <el-row>
                          <el-col style="width: 40%">
                              猫眼评分：<span style="font-size: 18px">{{this.movie.score}}</span>
                          </el-col>
                          <el-col style="width: 60%">
                            <el-rate show-score
                              v-model="value"
                              disabled
                              show-score
                              text-color="#ff9900"
                              score-template="{value}">
                            </el-rate>
                          </el-col>
                        </el-row>
                        <el-col style="width: 50%">
                          累计票房：<span style="font-size: 18px">{{this.movie.totalMoney}}亿</span>
                        </el-col>
                      </el-col>
                    </div>
                    <el-row style="margin-right: 250px">
                      <el-col>
                        <el-button type="success" plain>想看</el-button>
                        <el-button type="warning" plain>评分</el-button>
                        <el-button type="primary" class="el-icon-goods" @click="go(movie)">特惠购票</el-button>
                      </el-col>
                    </el-row>

                  </el-card>
                </el-col>
              </el-row>

            </el-card>
          </div>
          <el-row style="width: 100%">
            <el-col style="width:100%;height:100%;background:paleturquoise;margin-left: 5%;margin-top: 5%">
              <el-card>
                <el-row style="height: 300px;background-color: lightslategrey">
                  <div class="line"></div>
                  <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-menu-item index="1">介绍</el-menu-item>
                  </el-menu>

                  <el-col style="margin-top: 20px;margin-right: 90%">
                  <h4> {{this.movie.description}}</h4>
                </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col style="width:100%;height:100%;background:paleturquoise;margin-left: 5%;margin-top: 5%">
              <el-card>
                <el-row style="height: 300px">
                  <div class="line"></div>
                  <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                   @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-menu-item index="3" >演职人员
                      <el-row>
                        <el-col :span="5" v-for="(a, index) in actor" :key="index" :offset="index > 2 ? 1 : 1">
                          <el-card>
                            <img style="height: 60%;width: 60%" :src="a.actorImg" class="image">
                            <div style="height: 30px;width: 40px">
                              <span>{{a.actorName}}</span>
                              <div class="bottom clearfix">
                                <el-button type="success" @click="actorIntroduce(a.actorId)" class="button" >点击查看</el-button>
                              </div>
                            </div>
                          </el-card>
                        </el-col>
                      </el-row>
                    </el-menu-item>
                    </el-menu>
                </el-row>
              </el-card>
            </el-col>
            <el-col style="width:100%;height:100%;background:paleturquoise;margin-left: 55px;margin-top: 5%">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="font-size: 25px">热门评论</span>
                </div>
                <div v-for="u in comments" :key="u.user.id" class="text item">
                  <el-row>
                    <el-col style="margin-top: 20px ;width: 25%">
                      <el-image fit="fill"  style="width: 75px; height: 75px" :src="u.user.userImage">头像</el-image>
                      <span style="">{{u.user.userName}}</span>
                    </el-col>
                    <span>
                    <el-col>
                      <el-rate
                        v-model="value"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}">
                      </el-rate>
                    </el-col>
                      </span>
                    <el-col style="margin-top: 20px">
                      <span>{{u.comment}}</span>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
            <el-col style="width:100%;height:100%;background:paleturquoise;margin-left: 55px;margin-top: 5%">
              <el-card>
                <el-row>
                  <div class="line"></div>
                  <el-col style="margin-top: 20px;height: 200px;">
                    <span style="font-size: 25px">相关电影</span>
                  </el-col>
                  <el-col style="margin-top: 20px;margin-right: 90%">
                      <div style="margin-left: 0%">
                        <el-row>
                          <el-col :span="5" v-for="(a, index) in movies" :key="index" :offset="index > 2 ? 1 : 1">
                            <el-card :body-style="{ padding: '5px' }">
                              <img :src="a.poster" class="image">
                              <div style="padding: 30px;">
                                <span>{{a.movieName}}</span>
                              </div>
                            </el-card>
                          </el-col>
                        </el-row>
                      </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-row>

      </div>
      <el-footer>
        <!--<my-footer></my-footer>-->
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "",
    data(){

      return{
        activeIndex: '1',
        activeIndex2: '1',
        value: 5,
        movie:{},
        movies:[],
        actor:{},
        comments:[
          {
            comment:'',
            user:{
              userImage:'',
            }
          }

        ],
        dialogVisible: false,
        total: 10,
        params:{
          page:1,
          size:2
        },
        id:'',
        typeid:'',
      }
    },
    methods:{
      //根据电影id查询详细信息
      findMovieById:function () {
        this.$axios.get("/movie/findMovieById/"+this.id).then(res=>{
          // alert(id)
          if (res.data.code==0){
            this.movie = res.data.data;
          }
        })
      },go:function(movie){
        this.$router.push("/*/"+movie);
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      //根据电影id查询评论列表默认查询5个
      findByUserComment:function () {
        this.$axios.get("/movie/findByUserComment/"+this.id+"/"+this.params.page+"/"+this.params.size).then(res=>{
          if (res.data.code==0){
            this.comments = res.data.data;
            this.total = res.data.data.count;
          }
        })
      },

      findActroByMovie :function () {
        this.$axios.get("/actor/findActroByMovie/"+this.id).then(res=>{
          if (res.data.code==0){
            this.actor = res.data.data;
            this.total = res.data.data.count;
          }
        })
      },
      findMovieByType :function () {
        this.$axios.get("/movie/findMovieByType/"+this.typeid).then(res=>{
          if (res.data.code==0){
            this.movies = res.data.data;
          }
        })
      },
      actorIntroduce:function (actorId) {
        this.$router.push("/course/"+actorId);
      },
    //查看所有演员
        artorVisibleFun:function () {
        this.dialogVisible= true;
        this.params.size=5;
        this.findActroByMovie();
      },
      change:function (page) {
        this.params.page=page;
        this.findActroByMovie();
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      //打开模态窗口，查询所有评论
      dialogVisibleFun:function () {
        this.dialogVisible= true;
        this.params.size=5;
        this.findByUserComment();
      },
      change:function (page) {
        this.params.page=page;
        this.findByUserComment();
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    },
    mounted(){
      this.id = this.$route.params.id;
      this.typeid=this.$route.params.type;
      this.findMovieByType()
      this.findMovieById()
      this.findByUserComment()
      this.findActroByMovie()
    }
  }
</script>

<style scope>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

</style>

